<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-table :data="tableData" height="700" border style="width: 100%">
      <!-- <el-table-column prop="image_path" label="头像" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.image_path" :min-width="70" :height="70" />
        </template>
      </el-table-column> -->
      <el-table-column prop="image_path" label="异物图片" align="center">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
            <img
              :src="scope.row.image_path"
              style="height: 650px; width: 1200px"
            />
            <img
              slot="reference"
              :src="scope.row.image_path"
              style="max-height: 50px; max-width: 100px"
            />
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="异物类型"> </el-table-column>
      <el-table-column prop="id" label="皮带编号"> </el-table-column>
      <el-table-column prop="position" label="皮带位置"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="handle(scope.$index, scope.row)"
            type="text"
            size="small"
            icon="el-icon-s-tools"
          >
            处置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "easyroadShows",
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  methods: {
    handle(index,rows) {
      this.$emit("handle", index,rows);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
